<template>
  <div class="app-container">
    <div class="search-div">
      <el-row>
        <el-col :span="1">
          <el-button type="primary" :icon="ArrowLeft" @click="back()"
            >返回列表</el-button
          >
        </el-col>
        <el-col :span="23">
          <el-button
            type="primary"
            style="float: right; margin-left: 10px"
            v-hasPermi="['catalyzer:catalyzerData:remove']"
            @click="deleteItem()"
            >删除</el-button
          >
          <el-button
            type="primary"
            v-hasPermi="['catalyzer:catalyzerData:edit']"
            style="float: right"
            @click="edit()"
            >编辑</el-button
          >
        </el-col>
      </el-row>
    </div>

    <div class="table-div">
      <div style="height: calc(100% - 35px)">
        <el-row class="row">
          <el-col
            :span="24"
            style="color: #717171; font-weight: 600; text-align: center"
          >
            <span>催化剂型号:</span>
            {{ formDialog.catalystsName }}
          </el-col>
        </el-row>
        <el-row
          class="row"
          style="color: #84848c; font-weight: 500; text-align: center"
        >
          <el-col :span="24">
            <span>催化剂类型号:</span>
            {{ formDialog.categoryName }}
            <span style="margin-left: 5%">模块型号:</span>
            {{ formDialog.moduleName }}
            <span style="margin-left: 5%">模块尺寸（mm）:</span>
            {{ formDialog.moduleL }} * {{ formDialog.moduleW }} *
            {{ formDialog.moduleH }}
          </el-col>
        </el-row>
        <el-row
          class="row"
          style="text-align: center; margin-top: 30px; font-size: large"
        >
          <el-col :span="24"> 基本信息 </el-col>
        </el-row>
        <el-row class="row-title" style="margin-top: 20px">
          <el-col :span="1"> </el-col>
          <el-col :span="7">
            <span>每层催化剂净高度（mm）：</span>
          </el-col>
          <el-col :span="7">
            <span>模块毛重（kg）：</span>
          </el-col>
          <el-col :span="7">
            <span>开孔率:</span>
          </el-col>
        </el-row>
        <el-row class="row-content">
          <el-col :span="1"> </el-col>
          <el-col :span="7">
            {{ formDialog.catalystsH }}
          </el-col>
          <el-col :span="7">
            {{ formDialog.moduleKg }}
          </el-col>
          <el-col :span="7">
            {{ formDialog.trepanRate }}
          </el-col>
        </el-row>
        <el-row class="row-title">
          <el-col :span="1"> </el-col>
          <el-col :span="7">
            <span>波纹宽度（mm）：</span>
          </el-col>
          <el-col :span="7">
            <span>波纹高度（mm）：</span>
          </el-col>
          <el-col :span="7">
            <span>波纹板厚度（mm）：</span>
          </el-col>
        </el-row>
        <el-row class="row-content">
          <el-col :span="1"> </el-col>
          <el-col :span="7">
            {{ formDialog.rippleW }}
          </el-col>
          <el-col :span="7">
            {{ formDialog.rippleH }}
          </el-col>
          <el-col :span="7">
            {{ formDialog.rippleThickness }}
          </el-col>
        </el-row>
        <el-row class="row-title">
          <el-col :span="1"> </el-col>
          <el-col :span="7">
            <span>平板厚度（mm）：</span>
          </el-col>
          <el-col :span="7">
            <span>节距（mm）：</span>
          </el-col>
          <el-col :span="7">
            <span>几何比表面积（m2/m3）：</span>
          </el-col>
        </el-row>
        <el-row class="row-content">
          <el-col :span="1"> </el-col>
          <el-col :span="7">
            {{ formDialog.plateThickness }}
          </el-col>
          <el-col :span="7">
            {{ formDialog.pitch }}
          </el-col>
          <el-col :span="7">
            {{ formDialog.geometryAreaRate }}
          </el-col>
        </el-row>
        <el-row class="row-title">
          <el-col :span="1"> </el-col>
          <el-col :span="7">
            <span>磨损率（%kg）：</span>
          </el-col>
          <el-col v-show="false" :span="7">
            <span>催化剂活性系数K0：</span>
          </el-col>
          <el-col v-show="false" :span="7">
            <span>末期活性系数K：</span>
          </el-col>
        </el-row>
        <el-row class="row-content">
          <el-col :span="1"> </el-col>
          <el-col :span="7">
            {{ formDialog.wearRate }}
          </el-col>
          <el-col v-show="false" :span="7">
            {{ formDialog.k0 }}
          </el-col>
          <el-col v-show="false" :span="7">
            {{ formDialog.k }}
          </el-col>
        </el-row>
        <div ref="commandstats" style="height: 420px; width: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/utils/request";
import { useRoute } from "vue-router";
import * as echarts from "echarts";

const commandstats = ref(null);
const dataX = ref([]);
const dataY = ref([]);
function initChart() {
  // 确保容器已挂载
  if (!commandstats.value) return;

  // 初始化图表实例
  const chartInstance = echarts.init(commandstats.value);

  // 设置图表配置项
  const option = {
    title: {
      text: "催化剂末期活性系数Ke值变化",
      left: "center",
    },
    tooltip: {
      trigger: "axis", // 触发方式：坐标轴触发
      formatter: function (params) {
        // 自定义提示框内容
        const data = params[0];
        return `
          <div style="font-weight:bold">年份: ${data.name}</div>
          <div>K值: ${data.value}</div>
        `;
      },
      backgroundColor: "rgba(50,50,50,0.7)", // 背景色
      borderColor: "#333", // 边框色
      textStyle: {
        color: "#fff", // 文字颜色
      },
    },
    xAxis: {
      name: "年份",
      type: "category",
      boundaryGap: false,
      data: dataX.value,
    },
    yAxis: {
      type: "value",
      name: "末期活性系数Ke",
      boundaryGap: false,
      nameTextStyle: {
        padding: [0, 0, 5, 0], // 上右下左
      },
    },
    series: [
      {
        data: dataY.value,
        type: "line",

        areaStyle: {
          color: "rgb(226, 117, 113)",
        },
        smooth: true,
      },
    ],
  }; // 应用配置
  chartInstance.setOption(option);

  // 响应式调整
  window.addEventListener("resize", () => {
    chartInstance.resize();
  });
}

const route = useRoute(); //接受传参用
const id = route.params.id;
const router = useRouter(); //页面跳转用

const formDialog = ref({});

function back() {
  router.push("/catalyzer/catalyzerData").then(() => {
    // 通过重新加载当前路由实现刷新
    router.go(0);
  });
}

//编辑
function edit() {
  router.push("/catalyzer/editCatalyzer/" + id).then(() => {});
}

//删除
function deleteItem() {
  ElMessageBox.confirm("确定删除此催化剂吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      request({
        url: "/catalyzer/catalyzerData/" + id,
        method: "delete",
        params: {},
      }).then((response) => {
        ElMessage.success("删除成功！");
        back();
      });
    })
    .catch(() => {});
}

function getList() {
  request({
    url: "/catalyzer/catalyzerData/" + id,
    method: "get",
    params: {},
  }).then((response) => {
    formDialog.value = response.data;
    dataX.value = response.data.kyear.split(",");
    dataY.value = response.data.kvalue.split(",");
    initChart();
  });
}

onMounted(() => {
  getList();
});
</script>

<style scoped>
.row {
  margin-bottom: 10px;
}

.row-title {
  color: #3474c4;
  margin-bottom: 10px;
  font-weight: 500;
}

.row-content {
  color: #555555;
  margin-bottom: 40px;
  font-weight: 500;
}

.app-container {
  padding: 10px;
  height: 100%;
  width: 100%;
}

.search-div {
  height: 7%;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
}
.table-div {
  height: calc(90% - 20px);
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow-y: auto;
}

.center-content {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 确保高度占满父容器 */
}

.shuxian {
  height: 23px;
  width: 5px;
  margin-left: 2%;
  background-color: #355af0;
}

.headtitle {
  margin-left: 10px;
  font-size: 18px;
}

.chart {
  height: 400px;
}
</style>
